<template>
  <section class="i-main">
    <section class="container">
      <h4 class="i-title" v-if="historys.length > 0">精彩回顾</h4>
      <ul class="row match-finish-list">
        <template v-for="(item, index) in historys">
          <HMatchInfo :item="item" :index="index" :historyPage="historyPage"></HMatchInfo>
        </template>
        <li class="col-xs-12 col-md-6 col-lg-4 match" v-show="historyPage + 1 < historyPageSum">
          <div id="moreFinish" class="more" @click="showHistorys">
            <span class="glyphicon glyphicon-chevron-down"></span>
            <span>更多</span>
          </div>
        </li>
      </ul>
    </section>
    <section class="container">
      <div>
        <h4 class="i-title">比赛</h4>
        <ul class="match-list">
          <template v-for="(item, index) in futureMatchs">
            <MatchInfo :item="item" :index="index"></MatchInfo>
          </template>
        </ul>
      </div>
      <div id="moreLive" class="more" v-show="matchPage + 1 < matchPageSum" @click="showMatchs">
        <span class="glyphicon glyphicon-chevron-down"></span>
        <span>更多</span>
      </div>
    </section>
    
  </section>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '../../../assets/css/variables.scss';
  .i-title{ 
    text-align: left; 
    margin: 0; 
    color: $hl-color; 
    font-weight: bold; 
  }
  .match-list{ 
    margin-bottom: 15px;
    li:first-child{
      margin-top: 0;
      border-top: 0;
    }
  }
  .more{
    line-height: 35px;
    color: $second-color;
    font-weight: bold;
    border: 1px solid $border-color;
    margin-bottom: 15px;
    cursor: pointer;
    &:hover{ 
      transform: scale(1.05); 
    }
  }
  .match-finish-list .more{ 
    line-height: 50px; 
    text-align: center; 
  }
</style>

<script>
import HMatchInfo from './HMatchInfo'
import MatchInfo from './MatchInfo'

export default {
  name: 'Match',
  components: {HMatchInfo, MatchInfo},
  data () {
    return {
      historys: [],
      futureMatchs: [],
      historyPage: 0,
      matchPage: 0,
      historyPageSum: 0,
      matchPageSum: 0,
      historyLength: commons.ispc ? 24 : 5,
      matchLength: 20,

    }
  },
  computed: {
    tomorrow(){
      let now = new Date().getTime();
      let tomorrow = commons.getTimeNumToStr(now + 24*60*60*1000, 'yyyy-MM-dd');
      return commons.getFullTime(tomorrow);
    }
  },
  methods: {
    showHistorys(){
      if(++this.historyPage < this.historyPageSum){
        let historyParams = {
          key: 'historys', 
          minTime: null, 
          maxTime: commons.today, 
          status: 2, 
          page: this.historyPage, 
          length: this.historyLength
        };
        this.requestMatchs(historyParams);
      }
    },

    showMatchs(){
      if(++this.matchPage < this.matchPageSum){
        let Params = {
          key: 'futureMatchs', 
          minTime: commons.today, 
          maxTime: null, 
          status: null, 
          page: this.matchPage, 
          length: this.matchLength
        };
        this.requestMatchs(Params);
      }
    },

    requestMatchs(_params){
      let self = this;

      $.ajax({
        url: '/start/match/getMatchs',
        type: 'POST',
        data: {
          'minTime': _params.minTime || '',
          'maxTime': _params.maxTime || '',
          'league': '',
          'status': _params.status || '',
          'page': _params.page || 0,
          'length': _params.length || 20,
          'order': _params.key == 'futureMatchs'
        },
        success(result){
          debugger;
          result.map(function(match){
            return commons.formatMatch(match);
          })
          
          self[_params.key] = self[_params.key].concat(result);
        },
        error(result){
          
        }
      });
    },

    requestMatchNum(_params){
      let self = this;

      $.ajax({
        url: '/start/admin/match/getMatchNum',
        type: 'POST',
        data: {
          'minTime': _params.minTime || '',
          'maxTime': _params.maxTime || '',
          'league': '',
          'status': _params.status || ''
        },
        success(result){
          debugger;
          if(_params.key === 'historys'){
            self.historyPageSum = Math.ceil(result / _params.length);
          }else{
            self.matchPageSum = Math.ceil(result / _params.length);
          }
        },
        error(result){
          
        }
      });
    },
  },
  mounted(){

    //history
    let historyParams = {
      key: 'historys', 
      minTime: null, 
      maxTime: commons.today, 
      status: 2, 
      page: 0, 
      length: this.historyLength
    };
    this.requestMatchs(historyParams);
    this.requestMatchNum(historyParams);

    //未赛
    let Params = {
      key: 'futureMatchs', 
      minTime: commons.today, 
      maxTime: null, 
      status: null, 
      page: 0, 
      length: this.matchLength
    };
    this.requestMatchs(Params);
    this.requestMatchNum(Params);

  },
}
</script>
